<template>
  <div class="suggestionTable">
    <!--系统评分及建议表格-->
    <el-table
        :data="tableData"
        style="width: 1633px; margin-bottom: 32px;">
      <el-table-column
          fixed
          prop="id"
          label="序号"
          width="206"
          align="center">
      </el-table-column>
      <el-table-column
          prop="trainId"
          label="车辆号"
          width="317"
          align="center">
      </el-table-column>
      <el-table-column
          prop="system"
          label="系统名称"
          width="341"
          align="center">
      </el-table-column>
      <el-table-column
          label="健康评分"
          width="384"
          align="center">
        <template slot-scope="scope">
          <span :class="scoreColorChoose(scope.row.healthScore)"
               style="width: 29px; height: 20px; font-size: 13px; line-height: 18px; padding: 3px 7px; border-radius: 3px;">
            {{scope.row.healthScore}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="suggestion"
          label="指导建议"
          width="384"
          align="center">
      </el-table-column>
    </el-table>

    <!--翻页-->
    <div style="float: left">
      当前显示1-10，共<span>342</span>条数据
    </div>
<!--    todo 页数输入跳转部分 -->
<!--    <div style="float: right">-->
<!--      <span>前往</span>-->
<!--      <el-input placeholder=" "></el-input>-->
<!--      <span>页</span>-->
<!--      <el-button>确定</el-button>-->
<!--    </div>-->
    <div style="float: right;">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="100"
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "sysSuggestionTable",
  data() {
    return {
      // 翻页测试数据
      currentPage: 5,

      tableData: [{
        id: '1',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '65',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '2',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '65',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '3',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '80',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '4',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '90',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '5',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '50',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '6',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '55',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '7',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '65',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '8',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '92',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '9',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '65',
        suggestion: '车辆建议指导详细描述'
      }, {
        id: '10',
        trainId: '017018',
        system: '列车控制系统',
        healthScore: '50',
        suggestion: '车辆建议指导详细描述'
      }]
    }
  },
  methods: {
    scoreColorChoose(score) {
      return {
        green: 80 <= score,
        yellow: 60 <= score && score < 80,
        red: score < 60
      }
    },
    // 两个翻页测试方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  computed: {
    ...mapState({
      trainIdSelected: state => state.healthManage_trainScore.trainIdSelected,
      lineSelected: state => state.healthManage_trainScore.lineSelected,
      trainNameSelected: state => state.healthManage_trainScore.trainNameSelected
    })
  },
  mounted() {

  }
}
</script>

<style>
/*表格表头样式*/
.suggestionTable .el-table__header th.el-table__cell{
  height: 48px;
  background-color: #131E3D;
  border-bottom: 1px solid #242F4F;
}
/*表格主体样式*/
.suggestionTable .el-table__body td.el-table__cell{
  height: 48px;
  /*background-color: #0F172D;*/
  border-bottom: 1px solid #242F4F;
}
/*表格主体背景色*/
.suggestionTable .el-table tr {
  background-color: #0F172D;
}
/*表格主体每行鼠标悬浮时候的背景色*/
.suggestionTable .el-table__body tr.hover-row>td {
  background-color: #242F4F;
}
/*表格主体每行高度*/
.suggestionTable .el-table__row {
  height: 56px;
}

/*表格底部边线颜色*/
.suggestionTable .el-table::before {
  background-color: #242F4F;
}

/*若不加该样式，则表格最后一行第一排会有一条白线*/
.suggestionTable .el-table__fixed::before {
  background-color: rgba(255, 255, 255, 0);
}

/*翻页模块样式*/
.suggestionTable .el-pagination.is-background li {
  background-color: #131E3D;
  border: 1px solid #1D3A7F;
}
.suggestionTable .el-pagination.is-background button {
  background-color: #131E3D;
  border: 1px solid #1D3A7F;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  color: #55A0FF;
  background-color: #131E3D;
  border: 1px solid #1D3A7F;
}
</style>

<style scoped>
.green {
  color: #1BB934;
  background-color: rgba(27, 185, 52, 0.1);
  border: 1px solid #1A710B;
}
.yellow {
  color: #F7981C;
  background-color: rgba(247, 152, 28, 0.1);
  border: 1px solid rgba(247, 152, 28, 0.4);
}
.red {
  color: #EB2B33;
  background-color: rgba(235, 43, 51, 0.1);
  border: 1px solid rgba(235, 43, 51, 0.45);
}
</style>
